<template>
  <div>
    <div>
      <el-card class="box-card" style="margin-top: 10px">
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="时间范围:">
              <el-date-picker
                class="inputData"
                placeholder="选择日期"
                v-model="formInline.valuetimes"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="SP名称:">
              <el-input
                v-model="formInline.proName"
                placeholder="请输入SP名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="业务主管:">
              <el-input
                v-model="formInline.manageName"
                placeholder="请输入业务主管名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" round @click="onSubmit">重置</el-button> -->
              <el-button type="primary" @click="onSearch">查询</el-button>
              <!-- <el-button type="success">下载</el-button> -->
            </el-form-item>
          </el-form>
        </div>
        <el-button @click="downLoad()" size="mini" type="primary"
          >模板导出</el-button
        >
        <el-button type="success" size="mini" @click="handleUploadFile()"
          >EXCEL导入</el-button
        >
        <el-dialog
          title="上传文件"
          :visible.sync="fileUploadVisible"
          :close-on-click-modal="false"
          class="edit-form"
          :before-close="handleClose"
          @close="rightDuanbi"
          width="40%"
          append-to-body
        >
          <el-form label-width="100px">
            <el-form-item>
              <el-upload
                drag
                accept=".pdf, .doc, .docx, .xls, .xlsx"
                class="upload-demo"
                ref="uploadIcon"
                :limit="limitNum"
                :auto-upload="false"
                :action="iconAction"
                :on-exceed="exceedFile"
                :on-change="fileChange"
                :on-remove="handleRemove"
                :on-preview="handlePreview"
                :on-success="handleSuccessIcon"
                :on-error="handleErrorIcon"
                :file-list="fileList"
                :data="iconFileData"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <!-- <div class="el-upload__tip" slot="tip">
                上传文件只能是 pdf、doc、docx、xls、xlsx格式，且不超过10M
              </div> -->
              </el-upload>
              <el-button
                size="small"
                type="primary"
                @click="IcuoUploadFile"
                style="margin-left: 140px"
                >确认提交</el-button
              >
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="handleCancel()">取消</el-button>
            <!-- <el-button type="primary" @click.native="handleUploadFile()"
            >提交</el-button
          > -->
          </div>
        </el-dialog>
        <el-table
          :data="dataList"
          style="width: 100%; margin-top: 20px"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(12,42,98, 0.9)"
        >
          <!-- <el-table-column type="index" label="序号" align="center">
          </el-table-column> -->
          <el-table-column prop="dept" label="部门" align="center">
          </el-table-column>
          <el-table-column prop="type" label="业务类别" align="center">
          </el-table-column>
          <el-table-column prop="proName" label="产品名称" align="center">
          </el-table-column>
          <el-table-column prop="company" label="合作单位" align="center">
          </el-table-column>
          <el-table-column prop="proportion" label="SI结算比例" align="center">
          </el-table-column>
          <el-table-column
            prop="manageName"
            label="业务主管姓名"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="manageAcc" label="业务主管工号" align="center">
          </el-table-column>
          <el-table-column
            prop="manageTel"
            label="业务主管电话号码"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                style="color: rgb(222, 225, 230)"
                @click="hanlleUpdate(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: red"
                @click="hanlleDelect(scope.row.id)"
                >删除</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="hanlleDu(scope.row.id)"
                >嘟一下</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          :pageNum="pageNum"
          :pageSize="pageSize"
          @pageChange="pageChange"
        />
      </el-card>
    </div>
    <!-- 编辑页面 -->
    <el-dialog
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visibleUpdate"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        :inline="true"
        @keyup.enter.native="dataFormSubmit()"
        label-width="120px"
      >
        <el-form-item label="部门" prop="dept">
          <el-input
            v-model="dataForm.dept"
            style="width: 15.125rem"
            clearable
            placeholder="请输入部门"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务类型" prop="type">
          <el-input
            v-model="dataForm.type"
            style="width: 15.125rem"
            clearable
            placeholder="请输入业务类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="proName">
          <el-input
            v-model="dataForm.proName"
            style="width: 15.125rem"
            clearable
            placeholder="请输入产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="合作单位" prop="company">
          <el-input
            v-model="dataForm.company"
            style="width: 15.125rem"
            clearable
            placeholder="请输入合作单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="SI结算比例" prop="proportion">
          <el-input
            v-model="dataForm.proportion"
            style="width: 15.125rem"
            clearable
            placeholder="请输入SI结算比例"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务主管名称" prop="manageName">
          <el-input
            v-model="dataForm.manageName"
            style="width: 15.125rem"
            clearable
            placeholder="请输入业务主管名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务主管工号" prop="manageAcc">
          <el-input
            v-model="dataForm.manageAcc"
            style="width: 15.125rem"
            clearable
            placeholder="请输入业务主管工号"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务主管号码" prop="manageTel">
          <el-input
            v-model="dataForm.manageTel"
            style="width: 15.125rem"
            placeholder="请输入业务主管号码"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataResetForm('dataForm')">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit('dataForm')"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      loading: true,
      loadingTow: true,
      disabled: false,
      dialogVisible: false,
      innerVisible: false,
      fileUploadVisible: false,
      iconAction: "", //文件上传的接口

      fileList: [], // excel文件列表
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      action: "",
      actionUp: "",
      iconFileData: {
        //文件上传所需要的参数
        file: "",
        unitType: "",
      },
      formInline: {
        user: "",
        region: "",
        valuetimes: [], //时间段，绑定的时间
        startTime: "", //开始时间
        endTime: "", //结束时间
        proName: "",
        manageName: "",
      },
      dataForm: {
        //编辑数据
        dept: "",
        type: "",
        proName: "",
        company: "",
        proportion: "",
        manageName: "",
        manageAcc: "",
        manageTel: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      ids: [],
      dataList: [],
      visibleUpdate: false,
      dataRule: {
        dept: [{ required: true, message: "请输入部门", trigger: "blur" }],
        type: [{ required: true, message: "请输入业务类型", trigger: "blur" }],
        proName: [
          { required: true, message: "请输入产品名称", trigger: "blur" },
        ],
        company: [
          { required: true, message: "请输入合作单位", trigger: "blur" },
        ],
        manageAcc: [{ required: true, message: "请输入工号", trigger: "blur" }],
      },
    };
  },
  components: {},
  computed: {
    groupId: {
      get() {
        return this.$store.state.user.groupId;
      },
    },
    cityCode: {
      get() {
        return this.$store.state.user.cityId;
      },
      set(val) {
        this.$store.commit("user/updateCityCode", val);
      },
    },
  },
  activated() {
    this.getPerson();
  },
  created() {
    this.actionUp = this.$http.adornUrl(
      `staffConfig/importDate?token=${this.$cookie.get("token")}`
    );
    this.iconAction = this.$http.adornUrl(
      `cp/importExcelData/?token=${this.$cookie.get("token")}`
    );
    this.action = this.$http.adornUrl(`staffConfig/downFile?type=6`);
    // this.action = this.$http.adornUrl(`staffConfig/downFile?type=1`);
    // alert(this.actionUp)
    // this.getPerson();
  },
  watch: {
    innerVisible(newVal, oldVal) {
      if (newVal === false) {
        // console.log("innerVisible-innerVisible");
        this.dataForm.unitStaffAcc = "";
        this.groupDataList = [];
      }
    },
  },
  methods: {
    //人员配置列表
    getPerson() {
      this.loading = true;
      this.dialogVisible = true;
      this.selectShowT = false;
      let startTime = "";
      let endTime = "";
      if (
        this.formInline.valuetimes !== "" &&
        this.formInline.valuetimes !== null
      ) {
        startTime = this.formInline.valuetimes[0];
        endTime = this.formInline.valuetimes[1];
      } else {
        startTime = "";
        endTime = "";
      }
      console.log("startTime==", startTime + "----" + "endTime==", endTime);
      //列表(点击人员选择)
      this.$http({
        url: this.$http.adornUrl(`cp/list`),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
          proName: this.formInline.proName,
          manageName: this.formInline.manageName,
          startTime,
          endTime,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          setTimeout(() => {
            this.loading = false;
            this.dataList = data.page.list;
            // this.dataList = [];
            this.total = data.page.totalCount;
          }, 1000);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //查询
    onSearch() {
      this.pageNum = 1;
      this.getPerson();
    },

    // 分页（点击人员选择）
    pageChange(page) {
      // console.log(page._pageSize);
      // console.log(page._currentPage);
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.getPerson();
    },
    // 分页(分组列表)
    pageChangeG(page) {
      // console.log(page._pageSize);
      // console.log(page._currentPage);
      this.pageSizeG = page._pageSize;
      this.pageNumG = page._currentPage;
      this.getPersonG();
    },
    //excel上传
    // 上传成功(热门文章)
    uploadSuccess(response, file, fileList) {
      console.log("11111111111", response);
      console.log("11111111111", file);
      console.log("11111111111", fileList);
      if (response.code === 500) {
        this.$message.error(response.msg);
      } else {
        this.$message.success("上传成功");
        this.getPerson();
      }
    },
    // 上传失败(热门文章)
    uploadError(response, file, fileList) {
      // console.log("2222222222222222");
      // console.log("2222222222222222", response);
      // console.log("2222222222222222", file);
      // console.log("2222222222222222", fileList);
      this.$message.error("上传失败，请联系管理员");
    },
    //模板下载
    downLoad() {
      console.log("推送模板下载");
      console.log(this.action);
      //return
      window.open(this.action);
    },
    handleUploadFile() {
      this.fileUploadVisible = true;
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fileList = fileList;
      if (file.status === "success") {
        this.fileList = [];
      }
    },
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    // 回单上传和下载开始
    handlePreview(file, fileList) {
      console.log("per", file, fileList);
    },
    // 文件上传成功时的钩子
    handleSuccessIcon(res, file) {
      this.fileList = [];
      console.log(res.msg);
      // console.log(file.name, "filefilefile");
      if (res.code === 500) {
        console.log("res.code === 500");
        this.$message({
          type: "error",
          message: res.msg,
          duration: 2500,
        });
      } else {
        this.iconFileData.file = file.name;
        console.log("this.iconFileData.file,,,,,", this.iconFileData.file);
        this.$message.success("数据导入成功");
        this.selectShowT = false;
        this.getPerson();
      }
    },
    // 文件上传失败时的钩子
    handleErrorIcon(err, file) {
      console.log("err=", err);
      console.log("file=", file);
      this.$message.error("文件上传失败");
    },
    //立即上传(点击icontub的上传)
    IcuoUploadFile() {
      console.log(this.fileList);
      if (this.fileList.length === 0) {
        this.$message.warning("请上传文件");
        return;
      }
      // this.$message({
      //     message: "文件正在上传",
      //     duration: 1200,
      //   });
      this.$refs.uploadIcon.submit();
      // this.getDispatchList();
      this.fileUploadVisible = false;
      // console.log("刷新了吗");
      this.getPerson();
    },
    //点击关闭dialog
    handleClose(done) {
      this.fileList = [];
      this.fileUploadVisible = false;
    },
    //弹出框右上角叉号事件
    rightDuanbi() {
      this.fileUploadVisible = false;
    },
    //点击取消
    handleCancel() {
      this.fileList = [];
      this.fileUploadVisible = false;
      this.$message({
        type: "info",
        message: "已取消",
      });
    },
    //编辑数据
    hanlleUpdate(data) {
      console.log("obj==", obj);
      let obj = JSON.parse(JSON.stringify(data)); //深拷贝,拷贝的是对象
      this.visibleUpdate = true;
      this.dataForm.id = obj.id;
      this.dataForm.dept = obj.dept;
      this.dataForm.type = obj.type;
      this.dataForm.proName = obj.proName;
      this.dataForm.company = obj.company;
      this.dataForm.proportion = obj.proportion;
      this.dataForm.manageName = obj.manageName;
      this.dataForm.manageAcc = obj.manageAcc;
      this.dataForm.manageTel = obj.manageTel;
    },
    dataResetForm(dataForm) {
      this.visibleUpdate = false;
      this.$refs[dataForm].resetFields();
    },
    // 表单提交
    dataFormSubmit(dataForm) {
      console.log(this.dataForm);
      this.$refs[dataForm].validate((valid) => {
        if (valid) {
          // return;
          this.$http({
            url: this.$http.adornUrl(
              `/cp/${!this.dataForm.id ? "insertPeople" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              dept: this.dataForm.dept,
              type: this.dataForm.type,
              proName: this.dataForm.proName,
              company: this.dataForm.company,
              proportion: this.dataForm.proportion,
              manageName: this.dataForm.manageName,
              manageAcc: this.dataForm.manageAcc,
              manageTel: this.dataForm.manageTel,
            }),
          }).then(({ data }) => {
            console.log(data, "data");
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visibleUpdate = false;
                  // this.$set(this.dataList,this.dataForm.id,this.dataForm)
                  this.getPerson();
                  
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    //删除
    hanlleDelect(id) {
      let ids = [];
      if (id) {
        ids = [id];
      }
      this.$confirm(`您确定要删除吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.info(ids);
          // let thisdata = this.$http.adornData(ids, false);
          // console.info(thisdata);
          this.$http({
            url: this.$http.adornUrl("/cp/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getPerson();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //嘟一下
    hanlleDu(id) {
      console.log("id=", id);
      this.$http({
        url: this.$http.adornUrl(`cp/sendDu`),
        method: "post",
        data: this.$http.adornData({
          id: id,
        }),
      }).then(({ data }) => {
        console.log(data, "data");
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.visibleUpdate = false;
              this.getPerson();
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.el-pagination {
  text-align: right;
}
/deep/ .el-range-editor--medium .el-range-input {
  background-color: transparent;
  color: white;
}
</style>